<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Domap</title>
    <!-- 引用 -->


    <!-- 引入 css 的CDN -->
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 js 的CDN -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.1/js/bootstrap.min.js"></script>

    <!-- 引入封装的请求 -->
    <script src="./03-ajax的封装.js"></script>

    <link rel="stylesheet" href="../css/head.css">

    <link rel="stylesheet" href="../font/iconfont.css">
    <style>

    </style>
    <!-- 1.引入 echarts.js  -->
    <script src="../js/echarts.js"></script>
</head>
<!-- 2.为图标准备一块空间 -->

<body>

    <!-- 创建地图容器元素 -->


    <div class="up">
        <!-- 排水管网GIS综合应用系统
        在地图之上，导航栏之下
        -->
        <div class="title">
            <div class="title1">排水管网GIS综合应用系统</div>
        </div>

        <!-- 导航 -->
        <div class="nav">
            <header>

                <ul class="ul_left">
                    <li><a href="#">首页</a></li>
                    <li><a href="#">地图操作</a></li>
                    <li><a href="#">管网查询</a></li>
                    <li><a href="#">管网统计</a></li>
                    <li><a href="#">巡检查询</a></li>
                    <li><a href="#">抢修维护</a></li>

                </ul>

                <ul class="right_right">
                    <li>
                        <a href="#" class="iconfont icon-tuichu">
                        </a>
                    </li>
                    <li><a href="#" class="iconfont icon-yonghu">admin</a></li>
                    <li>
                        <a href="#" class="iconfont icon-shezhixitongshezhigongnengshezhishuxing"></a>
                    </li>


                </ul>

                <ul class="ul_right">
                    <li><a href="#">图档管理</a></li>
                    <li><a href="#">企业管理</a></li>
                    <li><a href="#">窖井管理</a></li>
                    <li><a href="#">泵站管理</a></li>
                </ul>



            </header>

        </div>
        <!-- 功能 -->
        <!-- <div class="func"> -->

        <div class="father">

            <div class="son">抢修养护计划
                <div class="huan">
                    <div id="huan1"></div>
                    <script>
                        // 3.粘贴代码
                        // 自执行函数
                        (function() {
                            var chartDom = document.getElementById('huan1');
                            var myChart = echarts.init(chartDom);
                            var option;

                            const gaugeData = [{
                                value: 100,
                                name: 'Commonly'
                            }];
                            option = {
                                series: [{
                                    type: 'gauge',
                                    // 开始角度
                                    startAngle: -90,
                                    // 结束角度
                                    endAngle: 0,
                                    // 控制仪表指针，不出现
                                    pointer: {
                                        show: false
                                    },
                                    progress: {
                                        show: true,
                                        overlap: false,
                                        roundCap: true,
                                        clip: false,
                                        // 仪表的样式
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1, [{
                                                    offset: 0,
                                                    color: 'blue' //指0%处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: 'rgba(212,131,0,0)' //指100%处的颜色
                                                }],
                                                false
                                            )
                                        }
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            // 仪表粗细
                                            width: 10
                                        }
                                    },
                                    // 仪表刻度，不出现
                                    splitLine: {
                                        show: false,
                                        distance: 0,
                                        length: 10
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        show: false,
                                        distance: 50
                                    },
                                    data: [{
                                        value: 100,
                                        name: '总计划',
                                    }],
                                    title: {
                                        show: false,
                                        fontSize: 14,
                                    },
                                    detail: {
                                        width: 50,
                                        height: 14,
                                        fontSize: 20,
                                        color: 'inherit',
                                        formatter: '{value}',
                                        offsetCenter: ['0', '0']
                                    }
                                }]
                            };

                            option && myChart.setOption(option);

                        })()
                    </script>
                    <div id="huan2"></div>
                    <script>
                        // 3.粘贴代码
                        // 自执行函数
                        (function() {
                            var chartDom = document.getElementById('huan2');
                            var myChart = echarts.init(chartDom);
                            var option;

                            const gaugeData = [{
                                value: 100,
                                name: 'Commonly'
                            }];
                            option = {
                                series: [{
                                    type: 'gauge',
                                    // 开始角度
                                    startAngle: -90,
                                    // 结束角度
                                    endAngle: 0,
                                    // 控制仪表指针，不出现
                                    pointer: {
                                        show: false
                                    },
                                    progress: {
                                        show: true,
                                        overlap: false,
                                        roundCap: true,
                                        clip: false,
                                        // 仪表的样式
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1, [{
                                                    offset: 0,
                                                    color: 'green' //指0%处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: 'rgba(212,131,0,0)' //指100%处的颜色
                                                }],
                                                false
                                            )
                                        }
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            // 仪表粗细
                                            width: 10
                                        }
                                    },
                                    // 仪表刻度，不出现
                                    splitLine: {
                                        show: false,
                                        distance: 0,
                                        length: 10
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        show: false,
                                        distance: 50
                                    },
                                    data: [{
                                        value: 100,
                                        name: '待执行'
                                    }],
                                    title: {
                                        show: false,
                                        fontSize: 14
                                    },
                                    detail: {
                                        width: 50,
                                        height: 14,
                                        fontSize: 20,
                                        color: 'inherit',
                                        formatter: '{value}',
                                        offsetCenter: ['0', '0']
                                    }
                                }]
                            };

                            option && myChart.setOption(option);

                        })()
                    </script>
                    <div id="huan3"></div>
                    <script>
                        // 3.粘贴代码
                        // 自执行函数
                        (function() {
                            var chartDom = document.getElementById('huan3');
                            var myChart = echarts.init(chartDom);
                            var option;

                            const gaugeData = [{
                                value: 100,
                                name: 'Commonly'
                            }];
                            option = {
                                series: [{
                                    type: 'gauge',
                                    // 开始角度
                                    startAngle: -90,
                                    // 结束角度
                                    endAngle: 0,
                                    // 控制仪表指针，不出现
                                    pointer: {
                                        show: false
                                    },
                                    progress: {
                                        show: true,
                                        overlap: false,
                                        roundCap: true,
                                        clip: false,
                                        // 仪表的样式
                                        itemStyle: {
                                            color: new echarts.graphic.LinearGradient(
                                                0,
                                                0,
                                                0,
                                                1, [{
                                                    offset: 0,
                                                    color: 'orange' //指0%处的颜色
                                                }, {
                                                    offset: 1,
                                                    color: 'rgba(212,131,0,0)' //指100%处的颜色
                                                }],
                                                false
                                            )
                                        }
                                    },
                                    axisLine: {
                                        lineStyle: {
                                            // 仪表粗细
                                            width: 10
                                        }
                                    },
                                    // 仪表刻度，不出现
                                    splitLine: {
                                        show: false,
                                        distance: 0,
                                        length: 10
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        show: false,
                                        distance: 50
                                    },
                                    data: [{
                                        value: 100,
                                        name: '待确认'
                                    }],
                                    title: {
                                        show: false,
                                        fontSize: 14
                                    },
                                    detail: {
                                        width: 50,
                                        height: 14,
                                        fontSize: 20,
                                        color: 'inherit',
                                        formatter: '{value}',
                                        offsetCenter: ['0', '0']
                                    }
                                }]
                            };

                            option && myChart.setOption(option);

                        })()
                    </script>

                </div>
                <!-- 三圆环 -->
                <div class="kuang">
                    <!-- <form action="./02 表格.html"> -->

                    <form action="" style="margin-right: 30px;">
                        <!-- action 提交之后跳转到的页面 -->
                        <!-- form为表单域 -->
                        <!-- 表单控件 -->
                        <!-- input 输入框 -->
                        <!-- type 输入框类型 -->
                        <!--  -->
                        <select style="background:radial-gradient(#082c4e,white);color: #ffffff;position: absolute;top: 3px;" name="是否提交">
                    <!-- select 为选择控件-->
                   
                    <option value="状态"style  ;selected>状态    </option>
                    <!-- selected为默认选中 -->
                    <option value="抢修养护分队">抢修养护分队</option>
                    <option value="未提交">未提交</option>
                </select>
                        <!-- <p>自我介绍：<textarea cols="30" rows="10" name="self"></textarea></p> -->
                        <!-- textarea文本域 -->
                        <!-- <p><input type="submit"> <input type="reset"> <input type="button" value="普通按钮"></p> -->

                    </form>
                    <!-- <form action="./02 表格.html"> -->
                    <form action="">
                        <select style="background:radial-gradient(#082c4e,white);color: #ffffff;position: absolute;top: 3px;left: 130px;" name="是否提交">
                        <!-- select 为选择控件-->                      
                        <option value="抢修养护分队" selected>抢修养护分队</option>
                        <!-- selected为默认选中 -->
                        <option value="提交">提交</option>
                        <option value="未提交">未提交</option>
                    </select>
                    </form>

                    <div class="list" style="margin-left: 30px;">统计报表</div>
                </div>
                <!-- 三方框 -->
                <div class="kuangzhy">
                    <!-- <div class="zhy"> -->
                    <div class="wen派发">代派发</div>
                    <div class="wen百分">0.00%</div>
                    <div class="wen详情">
                        <a href="" style="color: rgb(54, 212, 57);text-decoration: none;">详情></a>
                    </div>
                    <div class="wen4" style="font-size: 15px;position: relative;top: 5px;">zhy</div>
                    <div class="wen4">抢修养护类类型:管线计划</div>
                    <div class="wen4">抢修养护点:ZZDDWS940至ZZDDWS938</div>
                    <div class="wen4">抢修养护周期:2023/10/27-2023/10/31</div>
                    <!-- </div> -->
                </div>
                <!-- zhy表格 -->
                <div class="changtiao">
                    <div class="changtiao1">总计划</div>
                    <div class="changtiao2">待执行</div>
                    <div class="changtiao3">待确认</div>
                </div>
                <!-- <div class="changtiaokong"></div> -->
            </div>
            <div class="son">抢修养护计划详情
                <div class="zhy">
                    <div class="Zhy">zhy
                        <div class="wen0">未提交</div>
                        <div class="wen">抢修养护计划编号:006</div>
                        <div class="wen">任务类型：管线计划</div>
                        <div class="wen">抢修养护事项</div>
                        <div class="wen">抢修养护开始时间:2023/10/27</div>
                        <div class="wen">抢修养护结束时间:2023/10/31</div>
                        <div class="wen">抢修养护人:huajintesttest1wisdom
                            <hr>
                        </div>
                        <div class="wen1">抢修养护点</div>

                    </div>
                </div>
                <div class="son1">
                    <video src="../img/视频.mp4" controls autoplay muted></video>
                </div>
            </div>
            <!-- 视频 -->
            <!-- 弹性盒子2 father-->
            <!-- zhy表格2 -->
        </div>
        <div class="xia2">
            <div class="jiankong">抢修养护监控</div>
            <!-- 翻页盒子1 -->
            <div class="guiji">轨迹回放</div>
            <!-- 翻页盒子2 -->
        </div>
        <div class="xia3">
            <div class="jiankong3">
                <input type="date" id="start" name="trip-start" value="2024-01-11" min="2018-01-01" max="2024-12-31" />
                <!-- <input type="date" id="end" name="trip-end" value="2018-07-22" min="2018-01-01" max="2018-12-31" /> -->
                <input type="text" class="serch" placeholder="请输入巡查人姓名" style="background-color: #082c4ec1;color: #ffffff;">
                <input type="button" value="查询" class="btn" style="color: #ffffff;">
                <table id="1" style="font-size: 10px;" width="800px">
                    <tr>
                        <td>序号</td>
                        <td>抢修养护人</td>
                        <td>最后登录位置</td>
                        <td>最后登录时间</td>
                        <td>状态</td>
                        <td>操作</td>
                        <!-- <td>流向</td>
                        <td>口径</td>
                        <td>材质</td> -->
                    </tr>
                </table>

                <script>
                    function ajaxFun(url, fun) {
                        // 1.实例化对象
                        var ajax = new XMLHttpRequest();
                        // 2.设置请求方法
                        ajax.open("GET", url);
                        // 3.发送请求
                        ajax.send();
                        // 4.监听状态改变
                        ajax.onreadystatechange = function() {
                            if (ajax.readyState == 4) {
                                if (ajax.status == 200 || ajax.status == 304) {
                                    fun(ajax.responseText);
                                }
                            }
                        }
                    }


                    ajaxFun("./data.json", function(data) {
                        // 这里拿到的是请求的所有的数据
                        console.log(data);
                        // 转为对象形式
                        data = JSON.parse(data);
                        var table = document.getElementById("1");
                        for (var i = 0; i < data.gwcx.length; i++) {
                            table.innerHTML += `<tr>
                                                    <td>${data.gwcx[i].id}</td>
                                                    <td>${data.gwcx[i].type}</td>
                                                    <td>${data.gwcx[i].buried}</td>
                                                    <td>${data.gwcx[i].start}</td>
                                                    <td>${data.gwcx[i].end}</td>
                                                    <td>${data.gwcx[i].height}</td>
                                                    
                                                </tr>`
                        }

                        // 搜索部分
                        // 获取搜索框和搜索按钮
                        var inp = document.getElementsByClassName("serch")[0];
                        var btn = document.getElementsByClassName("btn")[0];

                        // 准备一个空数组，用来保存符合搜索条件的数据
                        var newData = [];

                        btn.onclick = function() {
                            // 拿到输入框的内容
                            console.log(data.gwcx);
                            newData = []
                                // 遍历对应的数据
                            for (var i = 0; i < data.gwcx.length; i++) {
                                // 对象的遍历
                                for (var key in data.gwcx[i]) {
                                    // console.log(key);
                                    // 可以拿到对应的值
                                    console.log(data.gwcx[i][key]);

                                    // 将值和搜索框的内容进行比对
                                    if (data.gwcx[i][key].toString().includes(inp.value)) {
                                        newData.push(data.gwcx[i]);
                                        // 只要发现有符合所搜条件的内容，就直接终止遍历
                                        break;
                                    }
                                }
                            }

                            console.log(newData);
                            table.innerHTML = table.innerHTML = `    <tr>
                        <td>序号</td>
                        <td>抢修养护人</td>
                        <td>最后登录位置</td>
                        <td>最后登录时间</td>
                        <td>状态</td>
                        <td>操作</td>
                        
                    </tr>`
                                // 拿着符合条件的数据进行页面渲染
                            for (var i = 0; i < newData.length; i++) {
                                table.innerHTML += `<tr>
                                                    <td>${newData[i].id}</td>
                                                    <td>${newData[i].type}</td>
                                                    <td>${newData[i].buried}</td>
                                                    <td>${newData[i].start}</td>
                                                    <td>${newData[i].end}</td>
                                                    <td>${newData[i].height}</td>
                                                    
                                                </tr>`
                            }

                        }
                    })
                </script>

                <div class="fanye">
                    <img src="../img/ye.png" style="opacity: 0.2;" alt="">
                </div>
            </div>
            <!-- 翻页盒子1   搜索1 -->
            <div class="guiji3">
                <input type="date" id="start" name="trip-start" value="2024-01-11" min="2018-01-01" max="2024-12-31" />
                <input type="text" class="serch" placeholder="请输入巡查人姓名" style="background-color: #082c4ec1;color: #ffffff;">
                <input type="button" value="查询" class="btn" style="color: #ffffff;">
                <table id="2" style="font-size: 10px;" width="550">
                    <tr>
                        <td>序号</td>
                        <td>抢修养护人</td>
                        <td>所属计划</td>
                        <td>抢修养护开始时间</td>
                        <td>抢修养护结束时间</td>
                        <td>在线时长</td>
                        <!-- <td>流向</td>
            <td>口径</td>
            <td>材质</td> -->
                    </tr>
                </table>

                <script>
                    function ajaxFun(url, fun) {
                        // 1.实例化对象
                        var ajax = new XMLHttpRequest();
                        // 2.设置请求方法
                        ajax.open("GET", url);
                        // 3.发送请求
                        ajax.send();
                        // 4.监听状态改变
                        ajax.onreadystatechange = function() {
                            if (ajax.readyState == 4) {
                                if (ajax.status == 200 || ajax.status == 304) {
                                    fun(ajax.responseText);
                                }
                            }
                        }
                    }


                    ajaxFun("./data1.json", function(data) {
                        // 这里拿到的是请求的所有的数据
                        console.log(data);
                        // 转为对象形式
                        data = JSON.parse(data);
                        var table = document.getElementById("2");
                        for (var i = 0; i < data.gwcx.length; i++) {
                            table.innerHTML += `<tr>
                                        <td>${data.gwcx[i].id}</td>
                                        <td>${data.gwcx[i].type}</td>
                                        <td>${data.gwcx[i].buried}</td>
                                        <td>${data.gwcx[i].start}</td>
                                        <td>${data.gwcx[i].end }</td>
                                        <td>${data.gwcx[i].height}</td>
                                        
                                    </tr>`
                        }

                        // 搜索部分
                        // 获取搜索框和搜索按钮
                        var inp = document.getElementsByClassName("serch")[1];
                        var btn = document.getElementsByClassName("btn")[1];

                        // 准备一个空数组，用来保存符合搜索条件的数据
                        var newData = [];

                        btn.onclick = function() {
                            newData = []
                                // 拿到输入框的内容
                            console.log(data.gwcx);

                            // 遍历对应的数据
                            for (var i = 0; i < data.gwcx.length; i++) {
                                // 对象的遍历
                                for (var key in data.gwcx[i]) {
                                    // console.log(key);
                                    // 可以拿到对应的值
                                    console.log(data.gwcx[i][key]);

                                    // 将值和搜索框的内容进行比对
                                    if (data.gwcx[i][key].toString().includes(inp.value)) {
                                        newData.push(data.gwcx[i]);
                                        // 只要发现有符合所搜条件的内容，就直接终止遍历
                                        break;
                                    }
                                }
                            }

                            console.log(newData);
                            // 拿着符合条件的数据进行页面渲染
                            table.innerHTML = `<tr>
                        <td>序号</td>
                        <td>抢修养护人</td>
                        <td>所属计划</td>
                        <td>抢修养护开始时间</td>
                        <td>抢修养护结束时间</td>
                        <td>在线时长</td>
                        
                    </tr>`
                            for (var i = 0; i < newData.length; i++) {
                                table.innerHTML += `<tr>
                                        <td>${newData[i].id}</td>
                                        <td>${newData[i].type}</td>
                                        <td>${newData[i].buried}</td>
                                        <td>${newData[i].start}</td>
                                        <td>${newData[i].end}</td>
                                        <td>${newData[i].height}</td>
                                        
                                    </tr>`
                            }

                        }





                    })
                </script>

                <div class="fanye1">
                    <img src="../img/ye.png" style="opacity: 0.2;" alt="">
                </div>
            </div>
            <!-- 翻页盒子2 -->
        </div>
        <!-- </div> -->
    </div>

    <div id="container"></div>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=rMGqjcHqBs11BuSTfWCLpDHGicUlSZ9C"></script>

    <script>
        var map = new BMapGL.Map("container"); // 创建地图实例 
        // var point = new BMapGL.Point(116.404, 39.915);  // 创建点坐标 
        var point = new BMapGL.Point(114.1629, 34.6168);
        map.setMapStyleV2({
            styleId: '9c6071b5fbd54c6d522bd184076125aa'
        });
        map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
        map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        map.setHeading(64.5); //设置地图旋转角度
        map.setTilt(73); //设置地图的倾斜角度


        var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
        map.addControl(scaleCtrl);
        var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
        map.addControl(zoomCtrl);
        var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
        map.addControl(cityCtrl);
    </script>

</body>

</html>